<!--
 * @Author: 矫建武 1452239416@qq.com
 * @Date: 2024-10-12 17:41:42
 * @LastEditTime: 2024-12-18 09:24:35
 * @FilePath: \tool\src\views\Login.vue
 * @Description: 
 * 
 * @file: https://github.com/OBKoro1/koro1FileHeader/wiki/%E5%AE%89%E8%A3%85%E5%92%8C%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B
-->
<style lang="scss" scoped>
.meteor {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  .meteor-box {
    width: 380px;
    height: 230px;
    background-color: var(--transparent-background);
    border-radius: 10px;
    padding: 20px 0 0 20px;
    box-sizing: border-box;
  }
}
</style>

<template>
  <main class="meteor __flexCenter__">
    <div class="meteor-box">
      <h3>登录</h3>
      <br />
      <Forms
        :form-options="data.options"
        @getForms="(_d) => (data.formRefs = _d)"
        :config="data.formConfig"
      />
      <el-button type="primary" style="width: 94%" @click="goLogin">登录</el-button>
    </div>
  </main>
</template>

<script setup>
import { reactive } from 'vue'
import { checkForm } from '@/components/Forms/tool'
import { login } from '@/api/index.js'
import { useRouter, useRoute } from '@/hooks/router'
const router = useRouter()
const route = useRoute()
const data = reactive({
  formConfig: { inline: true, labelWidth: '55px', rules: true },
  formRefs: {},
  options: [
    {
      type: 'input',
      label: '账号',
      prop: 'account'
    },
    {
      type: 'input',
      label: '密码',
      attrs: { 'show-password': true },
      prop: 'password'
    }
  ]
})
const goLogin = () => {
  checkForm([data.formRefs._form], async () => {
    const res = await login(data.formRefs._get())
    if (res.code === 200) {
      localStorage.setItem('__token__', res.data.token)
      if (route.query.url) {
        router.push(route.query.url)
      } else {
        router.push({ name: 'toolFunction' })
      }
    }
  })
}
</script>
